<template>
	<div class="container">
		<!-- 路径导航区域 -->
		<el-breadcrumb separator="/">
			<el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
			<el-breadcrumb-item>回复表</el-breadcrumb-item>
			<el-breadcrumb-item>回复管理</el-breadcrumb-item>
		</el-breadcrumb>
		<!-- 搜索区域 -->
		<el-row>
			<el-form :inline="true">
				<el-form-item label="回复内容">
					<el-input v-model="queryInfo.replyText" clearable @clear="queryList"
						placeholder="请输入回复内容"></el-input>
				</el-form-item>
				<el-form-item>
					<el-button type="primary" icon="el-icon-search" @click="queryList">搜索</el-button>
					<!-- <el-button type="primary" @click="toAddReply">新增回复</el-button> -->
				</el-form-item>
			</el-form>
		</el-row>
		<!-- 表格区域 -->
		<el-table :data="replyList" border style="width: 100%" :header-cell-style="{ 'text-align': 'center' }"
			:cell-style="{ 'text-align': 'center' }">
			<el-table-column width="80px" prop="id" label="ID"></el-table-column>
			<el-table-column prop="replyText" label="回复内容">
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间">
			</el-table-column>
			<el-table-column prop="questionId" label="问题名称">
				<template slot-scope="scope">
					{{ questions[scope.row.questionId] }}
				</template>
			</el-table-column>
			<el-table-column prop="userId" label="用户昵称">
				<template slot-scope="scope">
					<el-tag type="warning">{{ users[scope.row.userId] }}</el-tag>
				</template>
			</el-table-column>
			<el-table-column label="操作">
				<template slot-scope='scope'>
					<el-button type="primary" icon="el-icon-edit" size="mini"
						@click="toEditArticle(scope.row)">修改</el-button>
					<el-button type="danger" icon="el-icon-delete" size="mini"
						@click="deleteArticle(scope.row.id)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>

		<!-- 分页区域 -->
		<el-pagination background @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryInfo.pageNum" :page-sizes="[1, 5, 10, 20]" :page-size="queryInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="total">
		</el-pagination>


		<!-- 新增和修改的对话框 -->
		<el-dialog :title="title" :visible.sync="dialogFormVisible" @close="cancle">
			<el-form :model="reply">
				<el-form-item label="回复内容" label-width="80px">
					<el-input placeholder="请输入回复内容" v-model="reply.replyText"></el-input>
				</el-form-item>

				<el-form-item label="问题名称" label-width="80px">
					<!-- <el-input placeholder="请输入问题ID" v-model="reply.questionId"></el-input> -->
					<el-select v-model="reply.questionId" filterable placeholder="请选择">
						<el-option v-for="item in questionList" :key="item.id" :label="item.title" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>

				<el-form-item label="用户昵称" label-width="80px">
					<!-- <el-input placeholder="请输入用户ID" v-model="reply.userId"></el-input> -->
					<el-select v-model="reply.userId" filterable placeholder="请选择">
						<el-option v-for="item in userList" :key="item.id" :label="item.nickName" :value="item.id">
						</el-option>
					</el-select>
				</el-form-item>

			</el-form>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cancle">取 消</el-button>
				<el-button type="primary" @click="addReply">确 定</el-button>
			</div>
		</el-dialog>


	</div>
</template>

<script>
export default {
	data() {
		return {
			// 查询信息对象
			queryInfo: {
				replyText: '',
				pageNum: 1,
				pageSize: 5
			},
			total: 183,
			replyList: [],
			title: '', // 对话框标题
			dialogFormVisible: false, // 是否显示对话框
			reply: { // 文章对象
				"id": '',
				"replyText": "",
				"createTime": "",
				"questionId": null,
				"userId": null,
			},
			questions: [],
			users: [],
			questionList: [],
			userList: [],
		}
	},
	methods: {

		// 查询所有的问题信息
		queryQuestion() {
			this.$http.get('/question/findAllIDAndTitle').then(res => {
				this.questionList = res.data.data;
				for (var i = 0; i < res.data.data.length; i++) {
					this.$set(this.questions, res.data.data[i].id, res.data.data[i].title);
				}
			})
		},

		// 查询所有的用户信息
		queryUser() {
			this.$http.get('user/findAll').then(res => {
				this.userList = res.data.data;
				for (var i = 0; i < res.data.data.length; i++) {
					this.$set(this.users, res.data.data[i].id, res.data.data[i].nickName);
				}
			})
		},

		// 进入添加的对话框
		toAddReply() {
			this.title = "新增回复";
			this.dialogFormVisible = true;
		},

		// 删除
		deleteArticle(id) {
			this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.$http.delete('reply/' + id)
						.then(resp => {
							if (resp.data.status == 200) {
								this.$message.success(resp.data.message)
								this.queryList()
							} else {
								this.$message.error(resp.data.message)
							}
						})
				})
				.catch(() => {
					this.$message({
						type: 'info',
						message: '已取消删除'
					})
				})
		},

		// 进入修改的预览数据页面
		toEditArticle(row) {
			//console.log(row)
			// 赋值
			this.reply = row;
			// 设置标题
			this.title = "修改";
			// 开启对话框
			this.dialogFormVisible = true;
		},

		// 取消对话框
		cancle() {
			this.dialogFormVisible = false;
			this.reply = { // 文章对象
				"id": '',
				"replyText": "",
				"createTime": "",
				"questionId": null,
				"userId": null,
			};
		},

		// 添加
		addReply() {
			if (this.reply.id) { // 有值为true  修改
				this.$http.put("reply", this.reply)
					.then(resp => {
						if (resp.data.status == 200) {
							// 消息提示
							this.$message.success('修改成功！');
							// 清空数据
							this.reply = { // 文章对象
								"id": '',
								"replyText": "",
								"createTime": "",
								"questionId": null,
								"userId": null
							}
							// 关闭对话框
							this.dialogFormVisible = false;
							// 重新查询
							this.queryList()
						} else {
							this.$message.error('接口异常！')
						}
					})

			} else {
				this.$http.post("reply", this.reply)
					.then(resp => {
						if (resp.data.status == 200) {
							// 消息提示
							this.$message.success('添加成功！');
							// 清空数据
							this.reply = { // 文章对象
								"id": '',
								"replyText": "",
								"createTime": "",
								"questionId": null,
								"userId": null,
							}
							// 关闭对话框
							this.dialogFormVisible = false;
							// 重新查询
							this.queryList()
						} else {
							this.$message.error('接口异常！')
						}
					})
			}
		},

		// 分页查询信息的方法
		queryList() {
			// 调用后端接口来获取数据
			this.$http.get('reply/findByPage', {
				params: this.queryInfo
			})
				.then(resp => {
					if (resp.data.status == 200) {
						// console.log(resp.data)
						this.replyList = resp.data.data.list;
						this.total = resp.data.data.total;
						// console.log(this.replyList)
					} else {
						this.$message.error('查询失败！')
					}
				})
		},
		handleSizeChange(size) {
			//console.log('每页显示数量发生改变');
			this.queryInfo.pageSize = size;
			this.queryInfo.pageNum = 1;
			// 重新查询
			this.queryList()
		},
		handleCurrentChange(num) {
			//console.log('页码发生改变');
			this.queryInfo.pageNum = num;
			// 重新查询
			this.queryList();
		}
	},
	mounted() {
		this.queryQuestion();
		this.queryUser();
		this.queryList();
	}
}
</script>

<style>
.el-breadcrumb {
	margin-bottom: 15px;
	padding: 0 0 15px;
	border-bottom: 1px solid #ddd;
}

.el-pagination {
	margin-top: 15px;
}

.el-link {
	padding: 0 5px;
}

/**设置富文本编辑器的最小高度，注意style中不能使用scoped **/
.ql-container {
	min-height: 200px;
}
</style>